<template>

  <div :class="{ 'ly-is-full': isFull }">
    <div class="tableSelect" ref="tableSelect">
      <el-form :inline="true" :model="formInline" label-position="right" v-if="searchMoreType">
        <el-row :gutter="26" type="flex">
          <el-col :span="26">
            <el-form-item label="市：" prop="municipality" label-width="170">
              <el-input v-model.trim="formInline.municipality" placeholder="请输入市名称" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="区：" prop="region" label-width="170">
              <el-input v-model.trim="formInline.region" placeholder="请输入区名称" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="所属机构：" prop="institution" label-width="170">
              <el-input v-model.trim="formInline.institution" placeholder="请输入所属机构" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="班级：" prop="calss" label-width="170">
              <el-input v-model.trim="formInline.calss" placeholder="请输入班级" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="科目：" prop="subject" label-width="170">
              <el-input v-model.trim="formInline.subject" placeholder="请输入科目" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="课程：" prop="course" label-width="170">
              <el-input v-model.trim="formInline.course" placeholder="请输入课程" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="课节次名称：" prop="class_session_name" label-width="170">
              <el-input v-model.trim="formInline.class_session_name" placeholder="请输入课节次名称"
                style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="上课时间：" prop="calss_time" label-width="170">
              <el-input v-model.trim="formInline.calss_time" placeholder="请输入上课时间" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="上课时间段：" prop="calss_time_slot" label-width="170">
              <el-input v-model.trim="formInline.calss_time_slot" placeholder="请输入上课时间段"
                style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="上课志愿者：" prop="volunteer_name" label-width="170">
              <el-input v-model.trim="formInline.volunteer_name" placeholder="请输入上课志愿者" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="志愿者考勤：" prop="volunteer_lv" label-width="170">
              <el-input v-model.trim="formInline.volunteer_lv" placeholder="请输入志愿者考勤" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="在地教师：" prop="local_teachers" label-width="170">
              <el-input v-model.trim="formInline.local_teachers" placeholder="请输入在地教师" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="在地教师考勤：" prop="local_teachers_lv" label-width="170">
              <el-input v-model.trim="formInline.local_teachers_lv" placeholder="请输入在地教师考勤"
                style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="课节状态：" prop="class_session_status" label-width="170">
              <el-select v-model="formInline.class_session_status" placeholder="请选择课节状态" clearable style="width: 300px"
                @change="search(1, $event)">
                <el-option v-for="item in class_session_status" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="异常原因：" prop="abnormal_cause" label-width="170">
              <el-input v-model.trim="formInline.abnormal_cause" placeholder="请输入异常原因" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="课程会议链接：" prop="link" label-width="170">
              <el-input v-model.trim="formInline.link" placeholder="请输入课程会议链接" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="课程会议号：" prop="code" label-width="170">
              <el-input v-model.trim="formInline.code" placeholder="请输入课程会议号" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="督课人员：" prop="staff_name" label-width="170">
              <el-input v-model.trim="formInline.staff_name" placeholder="请输入督课人员" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="是否正常上课：" prop="status" label-width="170">
              <el-select v-model="formInline.status" placeholder="请选择是否正常上课" clearable style="width: 300px"
                @change="search(2, $event)">
                <el-option v-for="item in class_status" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="志愿者是否正常入会：" prop="volunteer_stauts" label-width="170">
              <el-select v-model="formInline.volunteer_stauts" placeholder="请选择志愿者是否正常入会" clearable style="width: 300px"
                @change="search(3, $event)">
                <el-option v-for="item in volunteer_stauts" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注：" prop="remarks" label-width="170">
              <el-input v-model.trim="formInline.remarks" placeholder="请输入备注" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="是否暂停" prop="is_pause" label-width="170">
              <el-select v-model="formInline.is_pause" placeholder="请选择是否暂停" clearable style="width: 300px"
                @change="search(4, $event)">
                <el-option v-for="item in is_pauseList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="暂停原因：" prop="pause_remarks" label-width="170">
              <el-input v-model.trim="formInline.pause_remarks" placeholder="请输入暂停原因" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" :model="formInline" label-position="right" label-width="170px">
        <el-row :gutter="20" type="flex">
          <el-col :span="20">
            <el-form-item label-width="170">
              <el-input v-model.trim="formInline.school_name" placeholder="请输入学校名称" style="width: 300px"></el-input>
              <el-button @click="search" type="primary" icon="Search">查询</el-button></el-form-item>
            <el-form-item label=""><el-button @click="handleEdit('', 'reset')"
                icon="Refresh">重置</el-button></el-form-item>
            <el-form-item label=""><el-button @click="addModule" type="primary">添加</el-button></el-form-item>
            <el-form-item label=""><el-button @click="handleDelete" type="danger">删除</el-button></el-form-item>
            <el-form-item label=""><el-button @click="exportText" type="primary">导出</el-button></el-form-item>
            <el-form-item label=""><el-upload class="upload-demo" :on-preview="handlePreview"
                :action="`${$config.API_URL}common/upload/`" :on-remove="handleRemove"
                :before-remove="beforeRemove" multiple accept=".xls,.xlsx" :on-change="handleChange"
                :on-exceed="handleExceed" :on-success="handleSuccess" :file-list="fileList" :show-file-list="false">
                <el-button type="primary">导入</el-button>
              </el-upload></el-form-item>
          </el-col>

          <el-form-item prop="school_name">
            <el-button v-if="searchMoreType" @click="searchMore" type="primary" icon="Minus"
              style="margin-left: 20px">收回查询</el-button>

            <el-button v-if="!searchMoreType" @click="searchMore" type="primary" icon="Aim"
              style="margin-left: 20px">查询更多</el-button>
          </el-form-item>
        </el-row>

        <!-- <el-form-item label=""><el-button @click="handleDelete" type="danger" :disabled="multiple" v-show="isShowBtn('goodsType','商品分类','Delete')">删除</el-button></el-form-item> -->
      </el-form>
    </div>

    <div class="table">
      <el-table :height="tableHeight" border :data="tableData" v-loading="loadingPage" style="width: 100%"
        ref="tableref" @selection-change="handleSelectionChange" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <!--                <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="municipality" label="市"></el-table-column>
        <el-table-column min-width="100" prop="region" label="区"></el-table-column>
        <el-table-column min-width="200" prop="institution" label="所属机构"></el-table-column>
        <el-table-column min-width="150" prop="school_name" label="学校名称"></el-table-column>
        <el-table-column min-width="100" prop="calss" label="班级"></el-table-column>
        <el-table-column min-width="130" prop="subject" label="科目"></el-table-column>
        <el-table-column min-width="200" prop="course" label="课程"></el-table-column>
        <el-table-column min-width="130" prop="class_session_name" label="课节次名称"></el-table-column>
        <el-table-column min-width="150" prop="calss_time" label="上课日期"></el-table-column>
        <el-table-column min-width="100" prop="calss_time_last" label="上课时间"></el-table-column>
        <el-table-column min-width="100" prop="calss_time_slot" label="下课时间"></el-table-column>
        <el-table-column min-width="100" prop="volunteer_name" label="上课志愿者"></el-table-column>
        <el-table-column min-width="100" prop="local_teachers" label="在地教师"></el-table-column>
        <el-table-column min-width="100" prop="class_session_status" label="课节状态">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.class_session_status == '1'">正常</el-tag>
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="abnormal_cause" label="异常原因"></el-table-column>
        <el-table-column min-width="200" prop="link" label="课程会议链接">
          <template #default="scope">
            <a :href="scope.row.link" style="color: blue" target="_blank">{{
              scope.row.link
            }}</a>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="code" label="课程会议号"></el-table-column>
        <el-table-column min-width="100" prop="staff_name" label="督课人员"></el-table-column>
        <el-table-column min-width="100" prop="status" label="是否正常上课">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.status == '1'">正常</el-tag>
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="volunteer_stauts" label="志愿者是否正常入会">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.volunteer_stauts == '1'">正常</el-tag>
            <el-tag type="danger" v-else>异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="is_pause" label="是否暂停">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.is_pause == '1'">未暂停</el-tag>
            <el-tag type="danger" v-else>暂停</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="100" prop="pause remarks" label="暂停原因"></el-table-column>

        <el-table-column label="操作" width="100" fixed="right">
          <template #header>
            <div style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
              <div>操作</div>
              <div @click="setFull">
                <el-tooltip content="全屏" placement="bottom">
                  <el-icon><full-screen /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template #default="scope">
            <!--                        <span class="table-operate-btn" @click="handleEdit(scope.row,'detail')" v-show="isShowBtn('viptypeManage','会员卡管理','Retrieve')">详情</span>-->
            <!-- <span
              class="table-operate-btn"
              @click="handleEdit(scope.row, 'edit')"
              >编辑</span
            >
            <span
              class="table-operate-btn"
              @click="handleEdit(scope.row, 'delete')"
              >删除</span
            > -->
            
            <span class="table-operate-btn" @click="back">回访</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <add-module-goods-type ref="addModuleFlag" @refreshData="refreshData" :type="type"></add-module-goods-type>

    <el-dialog title="回访信息" v-model="inSchooleTextVis" width="700" @close="diaClose">
      <el-form :model="formInline">
        <el-form-item label="图片" :label-width="100">
          <el-upload class="upload-demo" :action="`${$config.API_URL}common/upload/`" :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleAvatarSuccess"
            accept=".png,.jpeg,.jpg" multiple :on-exceed="handleChangesImage" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否外出" :label-width="100">
          <el-radio-group v-model="isOut">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="100">
          <el-input v-model="formInline.mark" style="width: 440px" :rows="2" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
        <el-button type="primary" @click="submitDataS" :loading="loadingSave"
          :disabled="loadingTitle == '详情'">确定</el-button>
      </template>
    </el-dialog>
  </div>


</template>
<script>
import Pagination from "@/components/Pagination.vue";
import { dateFormats } from "@/utils/util";
import {
  timetableList,
  timetableDel,
  adminGroup,
  timetableImport,
} from "@/api/api";
import XEUtils from "xe-utils";
import AddModuleGoodsType from "./components/add.vue";
import { lyMixins } from "@/mixins/mixins";
import { setStorage, getStorage } from "@/utils/util";
import dayjs from "dayjs";
import axios from "axios";
export default {
  mixins: [lyMixins],
  components: {
    AddModuleGoodsType,
    Pagination,
  },
  name: "adminManage",
  data() {
    return {
      isOut:"",
      userInfo: "",
      searchMoreType: false,
      type: "",
      fileList: [],
      isFull: false,
      loadingPage: false,
      inSchooleTextVis: false,
      // 选项框选中数组
      ids: [],

      // 选项框非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formInline: {
        page: 1,
        page: 1,
        per_page: 10,
        mark: ""
      },
      pageparm: {
        page: 1,
        per_page: 10,
        total: 0,
      },
      statusList: [
        { id: 1, name: "正常" },
        { id: 0, name: "禁用" },
      ],
      timers: [],
      tableData: [],
      selectData: [],
      GroupList: [], //管理员分组列表
      class_session_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      class_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      volunteer_stauts: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      is_pauseList: [
        {
          value: "1",
          label: "未暂停",
        },
        {
          value: "2",
          label: "暂停",
        },
      ],
    };
  },
  methods: {
    back() {
      this.inSchooleTextVis = true;
    },
    handleClose() {
      this.inSchooleVis = false;
      this.inSchooleTextVis = false;
    },
    submitDataS() {
      this.inSchooleTextVis = false;
    },
    searchMore() {
      this.searchMoreType = !this.searchMoreType;
    },
    exportText(e) {
      if (this.ids.length == 0) {
        this.$message.error("请先选择导出数据");
        return;
      }
      axios({
        url: this.$config.API_URL+"timetable/export/",
        method: "post", //请求方法
        responseType: "blob", //表示接受服务器返回的二进制流
        data: {
          id: this.ids,
        },
      })
        .then((res) => {
          console.log(res);

          let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
          let fileName = "督课管理表"; // 自定义文件名
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            // IE兼容
            window.navigator.msSaveOrOpenBlob(blob, fileName);
          } else {
            let objectUrl = (window.URL || window.webkitURL).createObjectURL(
              blob
            );
            let downloadLink = document.createElement("a");
            downloadLink.href = objectUrl;
            downloadLink.download = fileName;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            window.URL.revokeObjectURL(objectUrl); // 释放URL对象
          }
        })
        .catch((error) => {
          this.$message.error("导出失败");
        });
    },
    formatDateTime(time) {
      return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
    },
    refreshData(x) {
      // 新增成功 搜索归0
      if (x) this.handleEdit("", "reset");
      else this.getData();
    },
    setFull() {
      this.isFull = !this.isFull;
      window.dispatchEvent(new Event("resize"));
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
    },
    //多选项框被选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 批量删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      if (ids.length == 0) {
        this.$message.warning("请选择要删除数据");
        return;
      }
      let vm = this;
      vm.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return timetableDel({ ids: ids }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.search();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    changeStatus(row) {
      console.log(row, "row----");
    },
    addModule() {
      console.log(this.GroupList, "---------新增出发");
      this.type = "add";
      this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
    },
    handleEdit(row, flag) {
      if (flag == "detail") {
        this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
      } else if (flag == "edit") {
        this.type = "edit";
        this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
      } else if (flag == "delete") {
        let vm = this;
        vm.$confirm("您确定要删除选中的数据吗？", {
          closeOnClickModal: false,
        })
          .then((res) => {
            timetableDel({ id: row.id }).then((res) => {
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.search();
              } else {
                vm.$message.warning(res.msg);
              }
            });
          })
          .catch(() => { });
      } else if (flag == "reset") {
        this.formInline = {
          page: 1,
          per_page: 10,
        };
        this.pageparm = {
          page: 1,
          per_page: 10,
          total: 0,
        };
        this.getData();
      } else if (flag == "sure") {
        // this.$confirm('您是否已完成通知?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '通知成功!'
        //   });
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消'
        //   });          
        // });
      }
    },

    callFather(parm) {
      this.formInline.page = parm.page;
      this.formInline.per_page = parm.per_page;
      this.getData();
    },
    search(i, e) {
      if (i === 1)
        this.formData.class_session_status = this.class_session_status.find(
          (item) => item.value == e
        ).value;
      if (i === 2)
        this.formData.status = this.class_status.find(
          (item) => item.value == e
        ).value;
      if (i === 3)
        this.formData.volunteer_stauts = this.volunteer_stauts.find(
          (item) => item.value == e
        ).value;

      if (i === 4)
        this.formData.is_pause = this.is_pauseList.find(
          (item) => item.value == e
        ).value;
      this.getData();
    },
    //获取列表
    async getData() {
      this.loadingPage = true;
      timetableList(this.formInline).then((res) => {
        this.loadingPage = false;
        if (res.code == 1) {
          this.tableData = res.data.data;
          // // 将列表数据转换为树形数据
          // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
          this.pageparm.page = res.data.current_page;
          this.pageparm.per_page = res.data.per_page;
          this.pageparm.total = res.data.total;
        }
      });
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
        this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
      } else {
        this.formInline.beginAt = null;
        this.formInline.endAt = null;
      }
      this.search();
    },
    getGroupList() {
      // 管理员分组获取
      adminGroup().then((res) => {
        if (res.code == 1) {
          //console.log(res, "------------成功获取到管理员分组列表");
          this.GroupList = res.data;
        }
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(res, file) {
      if (res.code == 1) {
        timetableImport({ file: res.data.url }).then((res) => {
          if (res.code == 1) {
            this.getData();
            this.$message.success(`导入成功`);
          }
        });
      }
    },
    handleExceed(files, fileList) {
      console.log(files, fileList);
      return;
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件状态改变时
    handleChange(file) {
      // 结构获取文件名
      let { name } = file;
      // 正则校验文件格式
      let result = /^.xls|.png|.xlsx$/.test(
        // 截取文件名后缀 例：.zip
        // 注解：
        // substring() 截取字符串中介于两个指定下标之间的字符
        // toLowerCase()  将字符串转换为小写
        // lastIndexOf(".") 返回一个指定的字符串值最后出现的位置
        name.substring(name.lastIndexOf(".")).toLowerCase()
      );
      if (!result) {
        this.$message.error("上传文件格式不符合要求");
        return;
      }
    },
    addPlan(e) {
      // schoolEdit({ id: e.id }).then((res) => {
      //   if (res.code == 1) {
      //     if (res.data.images) {
      //       this.fileList = res.data.images.map((item) => {
      //         return {
      //           name: item,
      //           url: item,
      //         };
      //       });
      //     }
      //     if (res.data.video) {
      //       this.videoList = res.data.video.map((item) => {
      //         return {
      //           name: item,
      //           url: item,
      //         };
      //       });
      //     }
      //   }
      // });
      this.inSchooleTextVis = true;
      // this.addSchoolPlanForm.id = e.id;
    },
  },
  created() {
    // 获取管理员分组
    this.getGroupList();
    // 数据获取
    this.getData();
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  },
};
</script>
